<!doctype html>
<html lang="en">
<head>
    <title>广州市老旧小区微改造规划设计方案竞赛</title>
    <link rel="import" href="/src/page/head.html?__inline">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="/src/css/mobile.less">
    <script src="/src/lib/flexible.js"></script>
</head>
<body>
<!--头部导航-->
<link rel="import" href="/src/page/nav.html?__inline">

<!--内容-->
<div class="c-content c-detail disNone">
    <div class="c-title">
        <span>参赛作品</span>
    </div>
    <div class="center">
        <div class="tit">成果编号：<b>{{detail.flag}}</b></div>
        <div class="explain">报名单位/个人：{{detail.signup}}</div>
        <div class="imgs">
            <div class="img" v-for="img in detail.images">
                <img :src="img" alt="">
            </div>
        </div>
    </div>

    <div class="btn-footer">
        <div class="num">当前票数：<span>{{detail.piao}}</span></div>
        <button class="btn" type="button" v-on:click="vote()">投TA一票</button>
    </div>

    <div class="img-verity-box" v-if="isverity">
        <div class="cover-bg"></div>
        <div class="cover-cont">
            <img :src="imgurl" @click="verifyImg()">
            <input type="text" v-model="key" placeholder="验证码">
            <button type="button" class="confim" @click="vote()">确认</button>
            <button type="button" class="close" @click="isveritybox(false)">×</button>
        </div>
    </div>

</div>

<script>
    var app = new Vue({
        el : '.c-detail',
        data : {
            id : '',
            detail : '',
            lock : true,
            key : '',
            imgurl : '',
            sessionId : '',
            isverity : false
        },
        mounted : function () {
            this.id = location.search.split('=')[1];
            this.getlists();
            this.verifyImg();
        },
        methods : {
            getlists : function () {
                var _this = this;
                $.ajax({
                    url:'http://zt4.oeeee.com/www/ExtraDataVote/detail/db/2017jlgzwtp/id/'+_this.id,
                    datatype : "jsonp",
                    jsonp : 'callback',
                    success : function (json) {
                        if(typeof json == 'string'){
                            json = JSON.parse(json);
                        }
                        if(json.status==0){
                            _this.detail = json.data;
                            $('.disNone').removeClass('disNone');
                        }
                    }
                })
            },
            vote : function () {
                var _this = this;
                /*if(!this.key){
                    swal({title: "请输入验证码!", type: "warning"});return
                }*/

                if(!this.lock) return;
                this.lock = false;
                $.ajax({
                    url:'http://zt4.oeeee.com/www/ExtraDataVote/jsonp4Piao/db/2017jlgzwtp/verify/8888/id/'+_this.id/*+'?ztndsid='+_this.sessionId*/,
                    datatype : "jsonp",
                    jsonp : 'callback',
                    success : function (json) {
                        if(typeof json == 'string'){
                            json = JSON.parse(json);
                        }
                        if(json.status==0){
//                            _this.isveritybox(false);
                            _this.detail.piao++;
                            swal({title: "投票成功！", type: "success"});
                        }else{
                            console.log(json.msg)
                            swal({title: json.msg, type: "warning"});
                        }
                        _this.lock = true;
                    }
                })
            },
            verifyImg : function () {
                var _this = this;
                $.ajax({
                    url:'http://zt4.oeeee.com/www/ExtraDataVote/initSession/db/2017jlgzwtp',
                    datatype : "jsonp",
                    jsonp : 'callback',
                    success : function (json) {
                        _this.sessionId = json.sessionId;
                        _this.imgurl = 'http://zt4.oeeee.com/www/ExtraDataVote/verify/db/2017jlgzwtp?ztndsid='+_this.sessionId;
                    }
                })
            },
            isveritybox : function (boole) {
                this.isverity = boole;
            }
        }
    })
</script>
</body>
</html>